<script setup>
import { ref, reactive, onMounted, unref, watch, computed } from 'vue'
import {
  queryAmendClaimList,
  queryClaimMoreConditionsList,
  queryVisitorName,
  exportExcel
} from '@/api/home'
import { getByDictType } from '@/api/common'
import { message } from 'ant-design-vue'
import { useAccountStore } from '@/stores/account'
import { useRoute, useRouter } from 'vue-router'
import { useClaimColumns } from '@/composables/claim.js'
const { dynamicClaimInfoColumns, dynamicInnerColumns } = useClaimColumns()
import { downloadFile } from '@/utils/file'
import MissFileDrawer from './ClaimFileMissDrawer.vue'
import ClaimSubTaskDrawer from './ClaimSubTaskDrawer.vue'
import { scrollToElement, formatColumn } from '@/utils/tools.js'
import cloneDeep from 'lodash/cloneDeep'
const route = useRoute()
const router = useRouter()
/**
 * 脱敏
 */
const accountStore = useAccountStore()
const isEyeOpen = computed(() => {
  return accountStore.DESENSITIZATION
})
watch(
  () => isEyeOpen.value,
  (newValue, oldValue) => {
    getClaimData()
  }
)
// 导出
let exportLoading = ref(false)
async function exportFile() {
  exportLoading.value = true
  const data = {
    ...formData.value
  }
  let res = null
  try {
    res = await exportExcel(data)
  } finally {
    exportLoading.value = false
  }
  if (res) {
    downloadFile(res)
  }
}
/**
 * 表单查询区域
 */
const formData = ref({
  memberId: route.query.memberId,
  customerId: route.query.customerId,
  claimTypeCode: null, // 理赔类型
  contYear: [], // 保单年度
  claimNumber: '', // 理赔案件号
  claimBatchNumber: '', // 理赔批次号
  visitorName: [] // 就诊人姓名
})
let searchFormData = ref(cloneDeep(formData.value))
//重置
function reset() {
  formData.value = {
    memberId: '',
    customerId: '',
    claimTypeCode: null, // 理赔类型
    contYear: [], // 保单年度
    claimNumber: '', // 理赔案件号
    claimBatchNumber: '', // 理赔批次号
    visitorName: [] // 就诊人姓名
  }
  insuredList.value = []
}
// 就诊人姓名
let insuredList = ref([])
async function getInsuredList() {
  const { customerId, memberId } = formData.value
  let res = null
  try {
    const data = {
      memberId,
      customerId
    }
    res = await queryVisitorName(data)
  } catch (err) {
    console.log('err', err)
  }
  if (res?.isSuccess) {
    insuredList.value = res.data.map((v) => ({ name: v }))
    if (customerId) {
      const defaultName = res.data[0] || ''
      formData.value.visitorName = [defaultName]
    }
  }
}
//查询
async function handleSearch() {
  const { memberId, claimBatchNumber, visitorName, claimTypeCode, contYear, claimNumber } = unref(
    formData.value
  )
  if (
    !memberId &&
    visitorName.length == 0 &&
    !claimTypeCode &&
    contYear.length == 0 &&
    !claimNumber &&
    !claimBatchNumber
  ) {
    return message.warning('请至少输入一个查询条件')
  }
  pagination.current = 1
  searchFormData.value = cloneDeep(formData.value)
  getClaimData()
}
// 会员ID change
async function handleChangeMemberId(e) {
  formData.value.visitorName = []
  formData.value.customerId = ''
  insuredList.value = []
  if (e.target.value) {
    getInsuredList()
  }
}
// 就诊人change
function handlePatientChange(value) {
  console.log('value', value)
  formData.value.customerId = ''
  // 确保 `visitorName` 始终是数组
  if (Array.isArray(value)) {
    if (value.length > 1) {
      formData.value.visitorName = [value[value.length - 1]] // 保持为数组
    } else {
      formData.value.visitorName = value // 已经是数组
    }
  } else {
    formData.value.visitorName = [value]
  }
}
// 获取理赔类型&保单年度下拉列表
const claimtypeOptions = ref([])
const policyyearOptions = ref([])

async function getOptions() {
  let claimtypeRes = await getByDictType({ dictType: 'claimtype' })
  let policyyearRes = await getByDictType({ dictType: 'policyyear' })
  if (policyyearRes.isSuccess) {
    const list = []
    policyyearRes.data &&
      policyyearRes.data.length &&
      policyyearRes.data.map((v) => {
        list.push({
          label: v.dictCName,
          value: v.dictCode
        })
      })
    policyyearOptions.value = list
  }
  if (claimtypeRes.isSuccess) {
    const list = []
    claimtypeRes.data &&
      claimtypeRes.data.length &&
      claimtypeRes.data.map((v) => {
        list.push({
          label: v.dictName,
          value: v.dictCode
        })
      })
    claimtypeOptions.value = list
  }
}
// 基本信息接口初始化
function initData() {
  getOptions()
  if (route.query.customerId) {
    getInsuredList()
  }
}
onMounted(() => {
  initData()
})
/**
 * 获取table列表
 */
function handlePageChange(page, pageSize) {
  pagination.current = page
  pagination.pageSize = pageSize
  expandedRowKeys.value = []
  scrollToElement('claim-page-infomation-main')
  getClaimData()
}
const pagination = reactive({
  class: 'ant-pagination-common-ui',
  current: 1,
  pageSize: 10,
  size: 'large',
  showSizeChanger: true,
  hideOnSinglePage: true,
  total: 0,
  onChange: handlePageChange
})
let loading = ref(false)
const dataSource = ref([])
const innerData = ref([])
async function getClaimData() {
  let res = null
  loading.value = true
  try {
    const data = {
      desensitization: unref(isEyeOpen) ? '02' : '01',
      current: pagination.current,
      size: pagination.pageSize,
      ...searchFormData.value,
      visitorName: unref(searchFormData).visitorName.join(',')
    }
    console.log('data', data)
    res = await queryClaimMoreConditionsList(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    loading.value = false
  }
  if (res?.isSuccess) {
    dataSource.value = res.data.records.map((item, index) => {
      return {
        ...item,
        isClaimFlag: false,
        isNoCompensationSummaryAmountFlag: false,
        isActualCompensationAmountFlag: false,
        isPaidStatusFlag: false,
        isAppealStatusFlag: false,
        isCorrectionClaimsFlag: false,
        key: index
      }
    })
    pagination.total = Number(res.data.total)
  }
}
/**
 * table操作区域
 */
const currentClickId = ref(null)
// 展开行
let expandedRowKeys = ref([])
async function handleCellClick(record, column, bol) {
  if (column.key !== 'appealStatus') {
    return
  }
  currentClickId.value = record.claimNo
  record.isCorrectionClaimsFlag = bol
  if (!bol) {
    expandedRowKeys.value = []
    currentClickId.value = ''
    return
  }
  const olnyExpandOne = true // 只展开一行
  if (olnyExpandOne) {
    let res = null
    loading.value = true
    try {
      const data = {
        desensitization: unref(isEyeOpen) ? '02' : '01',
        current: pagination.current,
        size: pagination.pageSize,
        customerId: record.customerId,
        memberId: record.memberId,
        claimNo: record.claimNo,
        visitorName: record.membersName
      }
      res = await queryAmendClaimList(data)
    } catch (err) {
      console.log('err', err)
    } finally {
      loading.value = false
    }
    if (res?.isSuccess) {
      innerData.value = res.data.map((item) => {
        return {
          ...item,
          isClaimFlag: false,
          isNoCompensationSummaryAmountFlag: false,
          isActualCompensationAmountFlag: false,
          isPaidStatusFlag: false,
          isAppealStatusFlag: false
        }
      })
    }
    expandedRowKeys.value = []
    expandedRowKeys.value.push(record.key)
    dataSource.value = dataSource.value.map((item, index) => {
      if (record.key === index) {
        return item
      } else if (record.key !== index) {
        return {
          ...item,
          isCorrectionClaimsFlag: false
        }
      }
    })
  } else {
    const index = expandedRowKeys.value.indexOf(record.key)
    if (index === -1) {
      expandedRowKeys.value.push(record.key)
    } else {
      expandedRowKeys.value.splice(index, 1)
    }
  }
}
// 展开行的激活类名处理
function rowClassName(record) {
  return record.claimNo === currentClickId.value ? 'claim-row-active' : ''
}
// 关闭所有窗口
function allClose() {
  dataSource.value = dataSource.value.map((item) => {
    return {
      ...item,
      isClaimFlag: false,
      isNoCompensationSummaryAmountFlag: false,
      isActualCompensationAmountFlag: false,
      isPaidStatusFlag: false,
      isAppealStatusFlag: false
    }
  })
  innerData.value = innerData.value.map((item) => {
    return {
      ...item,
      isClaimFlag: false,
      isNoCompensationSummaryAmountFlag: false,
      isActualCompensationAmountFlag: false,
      isPaidStatusFlag: false,
      isAppealStatusFlag: false
    }
  })
}

function getPopupContainer(triggerNode) {
  return triggerNode.parentNode.parentNode
}
// 理赔号跳转
function toCheckClaims(url) {
  if (!url) return
  window.open(url)
}
// 剩余Ob跳转
function handleClickRestOb(record) {
  if (!record.restOBAmount) return
  router.push({
    path: '/ob/index',
    query: {
      ...route.query,
      memberId: record.memberId,
      customerId: record.customerId,
      claimNo: record.claimNo
    }
  })
}

// 理赔子任务
let subTaskStatusOpen = ref(false)
let subTaskInfo = ref({
  claimNo: ''
})
const showDrawer = (record) => {
  const { claimNo } = record
  if (!claimNo) return
  allClose()
  subTaskInfo.value.claimNo = claimNo
  subTaskStatusOpen.value = true
}
// 理赔缺件页
let fileOpen = ref(false)
let fileInfo = ref({
  claimNo: '',
  checkClaimsInputUrl: ''
})
const showFileDrawer = (record) => {
  const { claimNo, checkClaimsInputUrl } = record
  if (!claimNo) return
  allClose()
  fileInfo.value.claimNo = claimNo
  fileInfo.value.checkClaimsInputUrl = checkClaimsInputUrl
  fileOpen.value = true
}
</script>
<template>
  <div class="claim-page-infomation ant-page-common-ui">
    <div class="claim-search-header ant-page-search-ui">
      <a-row :gutter="[20, 20]">
        <a-col class="gutter-row" :span="6">
          <p class="title">会员ID</p>
          <a-input
            :bordered="false"
            v-model:value="formData.memberId"
            placeholder="请输入"
            allow-clear
            @change="handleChangeMemberId"
          />
        </a-col>
        <a-col class="gutter-row" :span="6">
          <p class="title">就诊人姓名</p>
          <a-select
            mode="tags"
            v-model:value="formData.visitorName"
            optionFilterProp="name"
            style="width: 100%"
            :field-names="{ label: 'name', value: 'name' }"
            :options="insuredList"
            :showArrow="true"
            placeholder="请选择或输入"
            allow-clear
            maxTagCount="1"
            :bordered="false"
            @change="handlePatientChange"
          />
        </a-col>
        <a-col class="gutter-row" :span="6">
          <p class="title">理赔类型</p>
          <a-select
            ref="select"
            :showArrow="true"
            :bordered="false"
            v-model:value="formData.claimTypeCode"
            style="width: 100%"
            placeholder="请选择"
            allow-clear
            :options="claimtypeOptions"
          ></a-select>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <p class="title">保单年度</p>
          <a-select
            ref="select"
            :showArrow="true"
            :bordered="false"
            allow-clear
            :showSearch="false"
            mode="multiple"
            v-model:value="formData.contYear"
            style="width: 100%"
            placeholder="请选择"
            :options="policyyearOptions"
          ></a-select>
        </a-col>
        <a-col class="gutter-row" :span="6">
          <p class="title">理赔案件号</p>
          <a-input
            :bordered="false"
            v-model:value="formData.claimNumber"
            placeholder="请输入"
            allow-clear
          />
        </a-col>
        <a-col class="gutter-row" :span="6">
          <p class="title">理赔批次号</p>
          <a-input
            :bordered="false"
            v-model:value="formData.claimBatchNumber"
            placeholder="请输入"
            allow-clear
          />
        </a-col>
        <a-col class="gutter-search" :span="6">
          <a-button type="primary" class="search-btn" :loading="loading" @click="handleSearch"
            >查询</a-button
          >
          <a-button @click="reset">重置</a-button>
        </a-col>
      </a-row>
    </div>
    <div class="claim-page-infomation-main" id="claim-page-infomation-main">
      <div class="header-btn">
        <a-button @click="allClose">关闭窗口</a-button>
        <a-button type="primary" class="search-btn" :loading="exportLoading" @click="exportFile"
          >导出查询结果</a-button
        >
      </div>
      <a-table
        :pagination="pagination"
        tableLayout="fixed"
        :bordered="false"
        :scroll="{ x: '1920px' }"
        class="ant-table-striped"
        :class="{ 'table-min-height': dataSource.length }"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        size="middle"
        :loading="loading"
        :dataSource="dataSource"
        :rowClassName="rowClassName"
        :columns="dynamicClaimInfoColumns"
        :expandIconAsCell="false"
        :expandIconColumnIndex="-1"
        :expandedRowKeys="expandedRowKeys"
      >
        <template #bodyCell="{ column, text, record }">
          <!-- 理赔号 -->
          <template v-if="column.key === 'claimNo'">
            <span
              class="text-decortion cursor-pointer"
              :class="{ 'text-decortion-red': record.isRed }"
              v-if="text"
              @click="toCheckClaims(record.checkClaimsInputUrl)"
              >{{ text }}</span
            >
            <span v-else>{{ formatColumn(text) }}</span>
          </template>
          <!-- 理赔状态 -->
          <template v-else-if="column.key === 'claimStatus'">
            <span>{{ formatColumn(text) }}</span>
            <div class="describe" v-if="record.claimStatus">
              <svg-icon
                class="question cursor-pointer"
                size="14"
                name="home-query"
                v-if="text"
                @click="record.isClaimFlag = true"
              />
              <a-popover
                :open="record.isClaimFlag"
                class="popover"
                :autoAdjustOverflow="true"
                :getPopupContainer="getPopupContainer"
              >
                <template #content>
                  <div class="popover-content">
                    <div class="popover-btn-box">
                      <span>操作人</span>
                      <svg-icon
                        class="home-popover-close cursor-pointer"
                        name="home-popover-close"
                        @click="record.isClaimFlag = false"
                      >
                      </svg-icon>
                    </div>
                    <div v-if="record.caseRegistrar">登记人：{{ record.caseRegistrar }}</div>
                    <div v-if="record.firstScanOperator">
                      扫描人：{{ record.firstScanOperator }}
                    </div>
                    <div v-if="record.entryOperator">录入人：{{ record.entryOperator }}</div>
                    <div v-if="record.processOperator">核赔人：{{ record.processOperator }}</div>
                    <div v-if="record.auditOperator">审批人：{{ record.auditOperator }}</div>
                    <div v-if="record.checkOperator">预付确认人：{{ record.checkOperator }}</div>
                    <div v-if="record.paymentOperator">付款人：{{ record.paymentOperator }}</div>
                  </div>
                </template>
              </a-popover>
            </div>
          </template>
          <!-- 子任务状态 -->
          <template v-else-if="column.key === 'subTaskStatus'">
            <span
              class="text-decortion cursor-pointer"
              :class="{ 'text-decortion-red': record.isRed }"
              v-if="text"
              @click="showDrawer(record)"
              >{{ text }}</span
            >
            <span v-else>{{ formatColumn(text) }}</span>
          </template>
          <!-- 当前是否缺件 -->
          <template v-else-if="column.key === 'isIncompleteNowCodeDesc'">
            <span
              class="text-decortion cursor-pointer"
              :class="{ 'text-decortion-red': record.isRed }"
              v-if="text"
              @click="showFileDrawer(record)"
              >{{ text }}</span
            >
            <span v-else>{{ formatColumn(text) }}</span>
          </template>
          <!-- 不赔付金额 -->
          <template v-else-if="column.key === 'noCompensationSummaryAmount'">
            <span>{{ formatColumn(text) }}</span>
            <div class="describe" v-if="record.isSupplementaryExplanation">
              <svg-icon
                class="question cursor-pointer"
                size="14"
                name="home-query"
                v-if="text"
                @click="record.isNoCompensationSummaryAmountFlag = true"
              />
              <a-popover
                :open="record.isNoCompensationSummaryAmountFlag"
                class="popover"
                :getPopupContainer="getPopupContainer"
              >
                <template #content>
                  <div class="popover-content">
                    <div class="popover-btn-box">
                      <span>理算不赔项金额</span>
                      <svg-icon
                        class="home-popover-close cursor-pointer"
                        name="home-popover-close"
                        @click="record.isNoCompensationSummaryAmountFlag = false"
                      >
                      </svg-icon>
                    </div>
                    <div v-if="record.cobInv">社会其它保险赔付金额：{{ record.cobInv }}</div>
                    <div v-if="record.providerCopayInv">
                      医院自付额：{{ record.providerCopayInv }}
                    </div>
                    <div v-if="record.policyDeductInv">
                      个人免赔额：{{ record.policyDeductInv }}
                    </div>
                    <div v-if="record.policyCopayInv">个人自付额：{{ record.policyCopayInv }}</div>
                    <div v-if="record.otherCopayInv">其他自付额：{{ record.otherCopayInv }}</div>
                    <div v-if="record.overchargedByProviderInv">
                      医院多收：{{ record.overchargedByProviderInv }}
                    </div>
                  </div>
                </template>
              </a-popover>
            </div>
          </template>
          <!-- 实际赔付金额 -->
          <template v-else-if="column.key === 'actualCompensationAmount'">
            <span>{{ formatColumn(text) }}</span>
            <div class="describe" v-if="record.isActualCompensationAmount">
              <svg-icon
                class="question cursor-pointer"
                size="14"
                name="home-query"
                v-if="text"
                @click="record.isActualCompensationAmountFlag = true"
              />
              <a-popover
                :open="record.isActualCompensationAmountFlag"
                class="popover"
                :getPopupContainer="getPopupContainer"
              >
                <template #content>
                  <div class="popover-content">
                    <div class="popover-btn-box">
                      <span>赔付抵扣金额</span>
                      <svg-icon
                        class="home-popover-close cursor-pointer"
                        name="home-popover-close"
                        @click="record.isActualCompensationAmountFlag = false"
                      >
                      </svg-icon>
                    </div>
                    <div v-if="record.oboffsetAmount">OB抵扣：{{ record.oboffsetAmount }}</div>
                    <div v-if="record.transferFeeRefund">
                      手续费偿还：{{ record.transferFeeRefund }}
                    </div>
                    <div v-if="record.transferFee">外汇手续费{{ record.transferFee }}</div>
                  </div>
                </template>
              </a-popover>
            </div>
          </template>
          <!-- 付款状态 -->
          <template v-else-if="column.key === 'paidStatus'">
            <span>{{ formatColumn(text) }}</span>
            <div class="describe" v-if="record.isPaidStatus">
              <svg-icon
                class="question cursor-pointer"
                size="14"
                name="home-query"
                v-if="text"
                @click="record.isPaidStatusFlag = true"
              />
              <a-popover
                :open="record.isPaidStatusFlag"
                class="popover"
                :getPopupContainer="getPopupContainer"
              >
                <template #content>
                  <div class="popover-content">
                    <div class="popover-btn-box">
                      <span>付款详情</span>
                      <svg-icon
                        class="home-popover-close cursor-pointer"
                        name="home-popover-close"
                        @click="record.isPaidStatusFlag = false"
                      >
                      </svg-icon>
                    </div>
                    <div v-if="record.claimPayee">收款人：{{ record.claimPayee }}</div>
                    <div v-if="record.accountNumber">银行账号：{{ record.accountNumber }}</div>
                    <div v-if="record.bankName">收款银行：{{ record.bankName }}</div>
                    <div v-if="record.paidDate">付款日期：{{ record.paidDate }}</div>
                    <div v-if="record.thisClaimActualCompensationAmount">
                      本理赔实际赔付金额：{{ record.thisClaimActualCompensationAmount }}
                    </div>
                    <div v-if="record.payBatchAmount">
                      本次总付款金额：{{ record.payBatchAmount }}
                    </div>
                  </div>
                </template>
              </a-popover>
            </div>
          </template>
          <!-- 剩余OB金额 -->
          <template v-else-if="column.key === 'restOBAmount'">
            <span
              :class="[text ? 'text-decortion cursor-pointer' : '']"
              @click="handleClickRestOb(record)"
            >
              {{ formatColumn(text) }}</span
            >
          </template>
          <!-- 关联理赔状态 -->
          <template v-else-if="column.key === 'appealStatus'">
            <div class="appeal-status">
              <span>{{ formatColumn(text) }}</span>
              <div class="describe" v-if="record.isAppealStatus">
                <svg-icon
                  class="question cursor-pointer"
                  size="14"
                  name="home-query"
                  v-if="text"
                  @click="record.isAppealStatusFlag = true"
                />
                <a-popover
                  :open="record.isAppealStatusFlag"
                  class="popover"
                  :getPopupContainer="getPopupContainer"
                >
                  <template #content>
                    <div class="popover-content">
                      <div class="popover-btn-box">
                        <span>申诉详情</span>
                        <svg-icon
                          class="home-popover-close cursor-pointer"
                          name="home-popover-close"
                          @click="record.isAppealStatusFlag = false"
                        >
                        </svg-icon>
                      </div>
                      <div v-if="record.appealReason">申诉原因：{{ record.appealReason }}</div>
                      <div v-if="record.appealDate">申诉提交日期：{{ record.appealDate }}</div>
                    </div>
                  </template>
                </a-popover>
              </div>

              <div class="icon-box">
                <svg-icon
                  v-if="record.isCorrectionClaims && !record.isCorrectionClaimsFlag"
                  @click="handleCellClick(record, column, true)"
                  class="appeal-status-icon cursor-pointer"
                  size="14"
                  name="unfold-icon"
                />

                <svg-icon
                  v-if="record.isCorrectionClaims && record.isCorrectionClaimsFlag"
                  @click="handleCellClick(record, column, false)"
                  class="appeal-status-icon cursor-pointer"
                  size="14"
                  name="pack-up-icon"
                />
              </div>
            </div>
          </template>
          <template v-else>
            <span>{{ formatColumn(text) }}</span>
          </template>
        </template>
        <template #expandedRowRender>
          <a-table
            class="ant-table-sub-striped"
            :columns="dynamicInnerColumns"
            :data-source="innerData"
            :pagination="false"
          >
            <template #bodyCell="{ column, text, record }">
              <!-- 理赔号 -->
              <template v-if="column.key === 'claimNo'">
                <span
                  class="text-decortion cursor-pointer"
                  :class="{ 'text-decortion-red': record.isRed }"
                  v-if="text"
                  @click="toCheckClaims(record.checkClaimsInputUrl)"
                  >{{ text }}</span
                >
                <span v-else>{{ formatColumn(text) }}</span>
              </template>
              <!-- 理赔状态 -->
              <template v-else-if="column.key === 'claimStatus'">
                <span>{{ formatColumn(text) }}</span>
                <div class="describe" v-if="record.claimStatus">
                  <svg-icon
                    class="question cursor-pointer"
                    size="14"
                    name="home-query"
                    v-if="text"
                    @click="record.isClaimFlag = true"
                  />
                  <a-popover
                    :open="record.isClaimFlag"
                    class="popover"
                    :autoAdjustOverflow="true"
                    :getPopupContainer="getPopupContainer"
                  >
                    <template #content>
                      <div class="popover-content">
                        <div class="popover-btn-box">
                          <span>操作人</span>
                          <svg-icon
                            class="home-popover-close cursor-pointer"
                            name="home-popover-close"
                            @click="record.isClaimFlag = false"
                          >
                          </svg-icon>
                        </div>
                        <div v-if="record.caseRegistrar">登记人：{{ record.caseRegistrar }}</div>
                        <div v-if="record.firstScanOperator">
                          扫描人：{{ record.firstScanOperator }}
                        </div>
                        <div v-if="record.entryOperator">录入人：{{ record.entryOperator }}</div>
                        <div v-if="record.processOperator">
                          核赔人：{{ record.processOperator }}
                        </div>
                        <div v-if="record.auditOperator">审批人：{{ record.auditOperator }}</div>
                        <div v-if="record.checkOperator">
                          预付确认人：{{ record.checkOperator }}
                        </div>
                        <div v-if="record.paymentOperator">
                          付款人：{{ record.paymentOperator }}
                        </div>
                      </div>
                    </template>
                  </a-popover>
                </div>
              </template>
              <!-- 子任务状态 -->
              <template v-else-if="column.key === 'subTaskStatus'">
                <span
                  class="text-decortion cursor-pointer"
                  :class="{ 'text-decortion-red': record.isRed }"
                  v-if="text"
                  @click="showDrawer(record)"
                  >{{ text }}</span
                >
                <span v-else>{{ formatColumn(text) }}</span>
              </template>
              <!-- 当前是否缺件 -->
              <template v-else-if="column.key === 'isIncompleteNowCodeDesc'">
                <span
                  class="text-decortion cursor-pointer"
                  :class="{ 'text-decortion-red': record.isRed }"
                  @click="showFileDrawer(record)"
                  v-if="text"
                  >{{ text }}</span
                >
                <span v-else>{{ formatColumn(text) }}</span>
              </template>
              <!-- 不赔付金额 -->
              <template v-else-if="column.key === 'noCompensationSummaryAmount'">
                <span>{{ formatColumn(text) }}</span>
                <div class="describe" v-if="record.isSupplementaryExplanation">
                  <svg-icon
                    class="question cursor-pointer"
                    size="14"
                    name="home-query"
                    v-if="text"
                    @click="record.isNoCompensationSummaryAmountFlag = true"
                  />
                  <a-popover
                    :open="record.isNoCompensationSummaryAmountFlag"
                    class="popover"
                    :getPopupContainer="getPopupContainer"
                  >
                    <template #content>
                      <div class="popover-content">
                        <div class="popover-btn-box">
                          <span>理算不赔项金额</span>
                          <svg-icon
                            class="home-popover-close cursor-pointer"
                            name="home-popover-close"
                            @click="record.isNoCompensationSummaryAmountFlag = false"
                          >
                          </svg-icon>
                        </div>
                        <div v-if="record.cobInv">社会其它保险赔付金额：{{ record.cobInv }}</div>
                        <div v-if="record.providerCopayInv">
                          医院自付额：{{ record.providerCopayInv }}
                        </div>
                        <div v-if="record.policyDeductInv">
                          个人免赔额：{{ record.policyDeductInv }}
                        </div>
                        <div v-if="record.policyCopayInv">
                          个人自付额：{{ record.policyCopayInv }}
                        </div>
                        <div v-if="record.otherCopayInv">
                          其他自付额：{{ record.otherCopayInv }}
                        </div>
                        <div v-if="record.overchargedByProviderInv">
                          医院多收：{{ record.overchargedByProviderInv }}
                        </div>
                      </div>
                    </template>
                  </a-popover>
                </div>
              </template>
              <!-- 实际赔付金额 -->
              <template v-else-if="column.key === 'actualCompensationAmount'">
                <span>{{ formatColumn(text) }}</span>
                <div class="describe" v-if="record.isActualCompensationAmount">
                  <svg-icon
                    class="question cursor-pointer"
                    size="14"
                    name="home-query"
                    v-if="text"
                    @click="record.isActualCompensationAmountFlag = true"
                  />
                  <a-popover
                    :open="record.isActualCompensationAmountFlag"
                    class="popover"
                    :getPopupContainer="getPopupContainer"
                  >
                    <template #content>
                      <div class="popover-content">
                        <div class="popover-btn-box">
                          <span>赔付抵扣金额</span>
                          <svg-icon
                            class="home-popover-close cursor-pointer"
                            name="home-popover-close"
                            @click="record.isActualCompensationAmountFlag = false"
                          >
                          </svg-icon>
                        </div>
                        <div v-if="record.oboffsetAmount">OB抵扣：{{ record.oboffsetAmount }}</div>
                        <div v-if="record.transferFeeRefund">
                          手续费偿还：{{ record.transferFeeRefund }}
                        </div>
                        <div v-if="record.transferFee">外汇手续费{{ record.transferFee }}</div>
                      </div>
                    </template>
                  </a-popover>
                </div>
              </template>
              <!-- 付款状态 -->
              <template v-else-if="column.key === 'paidStatus'">
                <span>{{ formatColumn(text) }}</span>
                <div class="describe" v-if="record.isPaidStatus">
                  <svg-icon
                    class="question cursor-pointer"
                    size="14"
                    name="home-query"
                    v-if="text"
                    @click="record.isPaidStatusFlag = true"
                  />
                  <a-popover
                    :open="record.isPaidStatusFlag"
                    class="popover"
                    :getPopupContainer="getPopupContainer"
                  >
                    <template #content>
                      <div class="popover-content">
                        <div class="popover-btn-box">
                          <span>付款详情</span>
                          <svg-icon
                            class="home-popover-close cursor-pointer"
                            name="home-popover-close"
                            @click="record.isPaidStatusFlag = false"
                          >
                          </svg-icon>
                        </div>
                        <div v-if="record.claimPayee">收款人：{{ record.claimPayee }}</div>
                        <div v-if="record.accountNumber">银行账号：{{ record.accountNumber }}</div>
                        <div v-if="record.bankName">收款银行：{{ record.bankName }}</div>
                        <div v-if="record.paidDate">付款日期：{{ record.paidDate }}</div>
                        <div v-if="record.payBatchAmount">
                          本次总付款金额：{{ record.payBatchAmount }}
                        </div>
                      </div>
                    </template>
                  </a-popover>
                </div>
              </template>
              <!-- 剩余OB金额 -->
              <template v-else-if="column.key === 'restOBAmount'">
                <span
                  :class="[text ? 'text-decortion cursor-pointer' : '']"
                  @click="handleClickRestOb(record)"
                >
                  {{ formatColumn(text) }}</span
                >
              </template>
              <template v-else>
                <span>{{ formatColumn(text) }}</span>
              </template>
            </template>
          </a-table>
        </template>
      </a-table>
    </div>
  </div>
  <ClaimSubTaskDrawer
    v-if="subTaskStatusOpen"
    :claimNo="subTaskInfo.claimNo"
    v-model:subTaskStatusOpen="subTaskStatusOpen"
  ></ClaimSubTaskDrawer>
  <MissFileDrawer
    v-if="fileOpen"
    :claimNo="fileInfo.claimNo"
    :claimUrl="fileInfo.checkClaimsInputUrl"
    v-model:fileOpen="fileOpen"
  ></MissFileDrawer>
</template>

<style lang="scss">
.break-word {
  word-break: break-all;
}
.claim-page-infomation {
  .claim-row-active {
    background: #ebf2f6;
  }
  .ant-table-striped.table-min-height {
    .ant-table-content {
      min-height: 320px;
    }
  }
  .ant-table-striped .table-striped td {
    background-color: #fafafa;
  }
  .ant-table-striped td,
  .ant-table-striped th {
    border-top: transparent !important;
    border-bottom: transparent !important;
  }

  .ant-table-sub-striped {
    background: #f9fdfe;
    .ant-spin-container {
      box-shadow: 0px 3px 6px 0px rgba(0, 34, 48, 0.12);
      background: #f9fdfe;
    }
    .ant-table-thead {
      .ant-table-cell {
        background: #f9fdfe;
      }
    }

    .ant-table-content {
      background: #f9fdfe;
      min-height: auto !important;
    }
  }
  .ant-table-miss-striped {
    .ant-table-tbody {
      .ant-table-cell {
        word-break: break-all;
      }
    }
    .break-word {
      word-break: break-all;
    }
  }
  .ant-table-expanded-row {
    box-shadow: 0px 3px 6px 0px rgba(0, 34, 48, 0.12);

    > .ant-table-cell {
      padding: 12px 0 !important;
    }
  }
}
</style>

<style lang="scss">
.home-popover-close {
  font-size: 12px;
  margin-left: 20px;
}
.popover-btn-box {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  align-items: center;
  margin-bottom: 5px;
}
.popover-content {
  white-space: nowrap;
}
.tootip {
  color: #fff;
}
.popover-btn {
  width: 60px;
  height: 32px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  font-family: PingFang-SC, PingFang-SC;
  font-weight: 500;
  font-size: 14px;
  color: $color-text-regular;
  margin-top: 5px;
}
.claim-page-infomation {
  padding: 30px 40px;
  background: linear-gradient(180deg, #e2edf9 0%, #ffffff 15%, #ffffff 83%, #f5f9fc 100%);
  .claim-search-header {
    width: 100%;
  }
  .gutter-row {
    .title {
      font-weight: bold;
      font-size: 15px;
      color: #333333;
      margin-bottom: 16px;
    }
  }
  .gutter-search {
    display: flex;
    align-items: end;
    .search-btn {
      margin-right: 16px;
    }
  }

  &-main {
    margin-top: 20px;
    .header-btn {
      margin-bottom: 20px;
      display: flex;
      justify-content: end;
      button {
        margin-left: 16px;
      }
    }
    .operation {
      color: $color-action;
    }
    .text-decortion {
      font-weight: 400;
      font-size: 14px;
      color: #4d789c;
      text-decoration: underline;
    }
    .text-decortion:hover {
      color: #97b7c5;
    }
    .text-decortion-red {
      color: #cf595d;
    }
    .describe {
      display: inline-block;
      position: relative;
    }
    .appeal-status {
      display: flex;
      align-items: center;
      .question {
        position: static;
        margin-left: 7px;
      }
      .icon-box,
      .describe {
        padding-top: 5px;
      }
      .appeal-status-icon {
        color: #fff;
        margin-left: 7px;
      }
    }
    .question {
      margin-left: 7px;
      position: absolute;
      bottom: -2px;
      color: #999;
    }

    .dialog {
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      .ant-popover-content {
        padding: 10px 15px;
        .btn {
          width: 60px;
          height: 32px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #dfdfdf;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 14px;
          color: $color-text-regular;
        }
      }
    }
    .splice-line {
      display: inline-block;
      margin: 0px 12px;
      height: 14px;
      width: 1px;
      background-color: rgb(223, 223, 223);
    }
  }
}
</style>
